<md-dialog flex="80">
    <form novalidate name="addItemLineForm" class="form-horizontal">
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>{{formTitle}}</h2>
        </div>
    </md-toolbar>
    <md-dialog-content class="" style="padding: 40px 40px 30px 14px;">
        <div class="form-group">
            <label class="control-label col-md-2" style="margin-bottom: 5px;">Item:</label>
            <div class="col-md-9">
                <input-validation-message field="itemSpec" form="addItemLineForm"></input-validation-message>
                <itemspec-auto-complete name="itemSpec" ng-model="currentItem.itemSpecId" ext-param="{statuses:['Active','Discontinue']}"
                  show-empty-customer-id-item="'true'" customer-id="customerId" on-select="itemSpecIdOnSelect(itemSpec)"  tags=['Material'] required="true"/>
            </div>
        </div>
        <div class="form-group" style="margin-bottom: 15px;">
            <span class="col-md-2"></span>
            <span class="col-md-5"><a ui-sref="fd.item.itemspec.edit" target="_blank">Setup New Item Spec</a></span>
        </div>
        <div class="item-line-diverse-container" ng-show="diverseFields && diverseFields.length>0">
            <div class="form-group">
                <div class="col-md-7" style="text-align: right;">
                    <button type="button" class="btn default" ng-click="resetFilter()">Reset Filter</button>
                </div>
            </div>
            <div class="form-group" ng-switch on="field.itemProperty.type" ng-repeat="field in diverseFields">
                <label class="control-label col-md-2">{{field.itemProperty.name}}:</label>
                <div class="col-md-5">
                    <input-validation-message field="field.{{$index}}.value" form="addItemLineForm"></input-validation-message>
                    <ui-select name="field.{{$index}}.value" ng-model="field.selectedProduct"
                               ng-show="field.availableDiverseValues && field.availableDiverseValues.length>0"
                               on-select="diverseValuesSelected(field)"
                               ng-required="field.availableDiverseValues && field.availableDiverseValues.length>0">
                        <ui-select-match>
                            <div>{{$select.selected.value}} {{$select.selected.unit}}</div>
                        </ui-select-match>
                        <ui-select-choices repeat="diverseObj in diverseValuesMap[field.propertyId] | filter: $select.search">
                            <div>{{diverseObj.value}} {{diverseObj.unit}}</div>
                        </ui-select-choices>
                    </ui-select>
                    <div ng-show="!field.availableDiverseValues || field.availableDiverseValues.length == 0"
                         style="margin-top:8px;">
                        No product in the inventory
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Title:</label>
            <div class="col-md-7">
                <input-validation-message field="title" form="addItemLineForm"></input-validation-message>
                <organization-auto-complete name="Title" tag="Title" on-select="titleOnSelect(org)" ng-model="currentItem.titleId" required="true"></organization-auto-complete>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Supplier:</label>
            <div class="col-md-7">
                <organization-auto-complete name="Supplier" tag="Supplier" on-select="supplierOnSelect(org)" allow-clear="true" ng-model="currentItem.supplierId"></organization-auto-complete>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">UOM:</label>
            <div class="col-md-7">
                <input-validation-message field="unit" form="addItemLineForm"></input-validation-message>
                <ui-select ng-model="currentItem.unit" name="unit" REQUIRED="true">
                    <ui-select-match>
                        <span ng-bind="$select.selected.name"></span>
                    </ui-select-match>
                    <ui-select-choices repeat="unit in itemSpecUnits | filter: $select.search">
                        <span ng-bind="unit.name"></span>
                    </ui-select-choices>
                </ui-select>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2 ">Qty:</label>
            <div class="col-md-7 ">
                <input-validation-message field="qty" form="addItemLineForm"></input-validation-message>
                <input type="number" name="qty" class="form-control" ng-model="currentItem.qty" REQUIRED="true"/>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">Note</label>
            <div class="col-md-9">
                <textarea class="form-control" name="note" id="note" rows="4" ng-model="currentItem.note"></textarea>
            </div>
        </div>
        <div class="form-group" ng-show="!ifProductExit">
            <label class="control-label col-md-2"></label>
            <div class="col-md-10" style="color:red">The select product does not exist, please check.</div>
        </div>
    </md-dialog-content>
    <md-dialog-actions layout="row">
        <div style="margin-right: 50px">
            <button type="submit" class="btn blue" ng-click="addItemLineForm.$valid && submit()">{{submitLabel}}</button>
            <button type="button" class="btn default" ng-click="cancel()">Cancel</button>
        </div>
    </md-dialog-actions>
    </form>
</md-dialog>

